<!-- 我的(主要信息，小游戏，收藏，设置，帮助) -->
<template>
  <div id="My">
    <!-- 头部详情 -->
    <div id="MyTop" class="BoxActive">
      <img :src="HeadPortrait">
      <router-link to="/MyInformation" >
        <div class="MyRight">
          <div class="MyName">{{Name}}</div>
          <div class="MyInfo">
            <div class="account">平台账号：{{Account}}</div>
            <img src="@/assets/img/ArrowRight.png" alt="404"> 
          </div>
        </div>
      </router-link>
    </div>
    <!-- 主要进入按钮 -->
    <div id="MyMain">
      <div class="MyMainBox BoxActive" @click="GotoDetail(index)" v-for="(Box,index) in Boxs" :key="index">
        <div class="MyMainBoxList">
          <div class="MyMainBoxName">
            <img :src="Box.src" alt="">
            <!-- <img src="@/assets/img/MinGames.png" alt=""> -->
            <div class="MyMainBoxNameText">{{Box.name}}</div>
          </div>
          <img src="@/assets/img/ArrowRight.png">
        </div>
        
      </div>
    </div>
    <!-- 底部部分 -->
    <Tab :active="2" info="70"></Tab>
  </div>
</template>

<script>
  import Tab from "../components/Tab"
  name:'My'
  export default {
    data() {
      return {
        Name:'',
        Account:'',
        HeadPortrait:require('@/assets/img/NoPic.png'),
        Boxs:[
          {src:require('@/assets/img/MinGames.png'),name:'小游戏'},
          {src:require('@/assets/img/Collection.png'),name:'收藏'},
          {src:require('@/assets/img/Install.png'),name:'设置'},
          {src:require('@/assets/img/Help.png'),name:'帮助'},
        ]
      }
    },
    components:{
        Tab,
    },
    mounted(){
      /**
      * 获取个人信息
      */
      this.$get(urlConfig.memberInfo)
      .then(res => {
        if(res.data ==''){
          
        }else{
          var that = this ;
          // 头像
          if(res.data.pic == urlConfig.BaseUrl){
            that.HeadPortrait = require('@/assets/img/NoPic.png');
          }else{
            that.HeadPortrait = res.data.pic;
          }
          // 昵称
          if(res.data.nickname == ''){
            that.Name = '未设置'
          }else{
            that.Name = res.data.nickname
          }
          that.Account = res.data.platformId ;
        }
      })
    },
    methods:{
      GotoDetail(index){
        console.log(index)
        if(index == 0){
          this.$router.push('/MiniGames')
        }else if(index == 1){
          this.$router.push('/Collection')
        }else if(index == 2){
          this.$router.push('/Install')
        }else{
          this.$router.push('/Help')
        }
      }
    }
  }
</script>

<style scoped lang="less">
  #My{
    #MyTop{
      padding: 25px 30px;
      display: flex;
      flex-direction: row;
      width: 690px;
      background: #fff;
      margin-bottom: 10px;
      img{
        width: 150px;
        height: 150px;
        border-radius: 75px;
      }
      .MyRight{
        color: #323232;
        width: 510px;
        margin-left: 30px;
        .MyName{
          font-size: 42px;
          line-height: 50px;
          width: 460px;
          font-family: PingFangSC-Medium;
          margin: 20px 0 20px;
        }
        .MyInfo{
          width: 510px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          height: 40px;
          .account{
            font-size: 28px;
            color: #999;
          }
          img{
            width: 20px;
            height: 32px;
          }
        }

      }
    }
    #MyMain{
      width: 750px;
      background: #fff;
      .MyMainBox{
        height: 100px;
        padding-left: 30px;
        &:last-child .MyMainBoxList{
          border-bottom: 0px;
        }
        .MyMainBoxList{
          border-bottom: 1px solid #e8e8e8;
          display: flex;flex-direction: row;
          height: 99px;
          justify-content: space-between;
          align-items: center;
        }
        
        .MyMainBoxName{
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          align-items: center;
          img{
            width: 38px;
            height: 38px;
            padding-right: 20px;
          }
          .MyMainBoxNameText{
            font-size: 28px;
          }
        }
        img{
          width: 20px;
          height: 32px;
          padding-right: 30px;
        }

      }
      
    }
  }
</style>